<template>
	<div class="login">
		<div class="logo">
			<img src="@/assets/images/logo.png" height="60px" />
		</div>
		<div class="content">
			<h3 class="form-title">Sign In</h3>
			<el-form :model="loginForm" ref="loginForm" status-icon :rules="loginRules" label-width="80">
				<el-form-item prop="uname">
					<el-input type="text" v-model="loginForm.uname" placeholder="用户名" autocomplete="off"
						size="medium" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item prop="pwd">
					<el-input type="password" v-model="loginForm.pwd" placeholder="密码" autocomplete="off"
						size="medium" :show-password="true" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="login-btn" @click="submitForm('loginForm')">登录</el-button>
					<el-button class="reset-btn" @click="resetForm('loginForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'LoginTwo',
		data() {
			return {
				loginForm: {
					uname: "",
					pwd: ""
				},
				loginRules: {
					uname: [{
						required: true,
						message: "必填"
					}],
					pwd: [{
						required: true,
						message: "必填"
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					let loginParam = {
						uname: this.loginForm.uname,
						pwd: this.loginForm.pwd
					};
					if (valid) {
						this.$api.post('/login/login', loginParam, {
							headers: {
								Authorization: "noAuth"
							}
						}).then(response => {
							if (response.success) {
								sessionStorage.setItem("access_token", response.data.token);
								this.$router.push({
									name: "home"
								});
							}
						});
					} else {
						//this.$message.error('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		background-color: #364150;
		padding: 0px;
		overflow: hidden;
		position: relative;

		.logo {
			margin: 0 auto;
			margin-top: 60px;
			padding: 15px;
			text-align: center;
		}

		.content {
			background-color: #eceef1;
			-webkit-border-radius: 7px;
			-moz-border-radius: 7px;
			-ms-border-radius: 7px;
			-o-border-radius: 7px;
			border-radius: 7px;
			width: 400px;
			margin: 40px auto 10px auto;
			padding: 30px;
			padding-top: 10px;
			overflow: hidden;
			position: relative;

			.form-title {
				margin-bottom: 25px;
				color: #4db3a5;
				text-align: center;
				font-size: 28px;
				font-weight: 400;
			}

			.login-btn {
				color: #fff;
				background-color: #45B6AF;
				border-color: #3ea49d;
				font-size: 14px;
				font-weight: 600;
				padding: 10px 20px !important;
			}

			.reset-btn {
				font-size: 14px;
				font-weight: 600;
				padding: 10px 20px !important;
			}
		}
	}
</style>
